<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>用户-区域配置</title>
    <meta http-equiv="expires",content="0">
    <meta http-equiv="pragma",content="no-cache">
    <meta http-equiv="cache-control",content="no-cache">
    <meta name="baidu-site-verification",content="u8kq1cj0ei">
    <meta http-equiv="expires",content="0">
    <meta content="yes",name="apple-mobile-web-app-capable">
    <meta content="black",name="apple-mobile-web-app-status-bar-style">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style>
        .userBox{
            width: 100%;
            min-height: 200px;
            border:1px dashed #ddd;
            margin:10px 0;
            font-size: 14px;
            padding: 20px 0;
            text-align: left;
            line-height: 24px;
            height: auto;
            position: inherit;
        }
        .treeBox{
            height: 100vh;
            width: 100%;
            position: fixed;
            top:0;
            left:0;
            z-index: 99999999999;
            background: #fff;
            text-align: center;
        }

        /*ztree*/
        .ztree li {

            line-height: 24px;
        }
        .ztree li span.button.ico_open {
            vertical-align: sub;
            margin-right: 6px;
        }
        .ztree li span.button.ico_close {
            vertical-align: sub;
            margin-right: 6px;
        }
        .ztree li span.button.chk {
            margin-right: 6px;
            margin-left: 6px;

        }

        .ztree li span.button.root_open {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree li span.button.root_close {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree li span.button.roots_open {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree li span.button.roots_close {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree li span.button.center_open {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree li span.button.center_close {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree li span.button.bottom_open {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree li span.button.bottom_close {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree li span.button.noline_open {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree li span.button.noline_close {
            transform: scale(1.4,1.4);    margin-top: -1px;
        }

        .ztree * {
            font-size: 14px;
        }

        .tabContent {
            display: flex;
            height: 45px;
            line-height: 45px;
            background: #2a8cec;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }

        .tabContentLeft {
            width: 25px;
        }

        .tabContentRight {
            width: 20px;
        }

        .tabContentMiddle {
            background: #2a8cec;
            flex: 1;
            overflow: hidden;
        }
        .tabActive {
            font-size: 14px;
            text-align: center;
            color: #2a8cec;
            background-image: url(/dist/img/tabApp.png);
            /* margin-left: 8px; */
            /* margin-right: 8px; */
            background-size: 100% 100%;
            /* padding: 10px 15px 15px; */
            float: left;
            height: 38px;
            line-height: 38px;
            margin-top: 9px;
            width: 50%;
        }

        .tabNo {
            text-align: center;
            font-size: 14px;
            color: #fff;
            /* margin-left: 8px; */
            /* margin-right: 8px; */
            background-size: 100% 100%;
            /* padding: 10px 15px 15px; */
            float: left;
            height: 38px;
            line-height: 38px;
            margin-top: 9px;
            width: 50%;
        }
        .selectBox{
            height: 80vh;
            overflow-y: auto;
        }

        .listBox{
            padding: 10px;
            text-align: left;
            overflow: hidden;
        }
        .typeTitle{
            text-align: left;
            font-size: 14px;
            font-weight: bold;
            line-height: 24px;
            margin-left: 12px;
            margin-top: 10px;
        }
        .listBox .item{
            width: 32%;
            text-align: center;
            line-height: 30px;
            height: 30px;
            cursor: pointer;
            border: 1px solid #ddd;
            padding: 0;
            /* margin-right: 3px; */
            /* margin-bottom: 3px; */
            float:left;
            margin-right: 2px;
            font-size: 12px;
            margin-bottom: 2px;
        }
        .listBox .item:nth-child(3n){
            margin-right: 0;
        }
        .listBox .active{
            background-color: #2a8cec;
            color: white;
        }
    </style>
</head>
<body>

<section class="content text-center" id="app" style="padding: 0;">
    <div class="tabContent">
        <div class="tabContentLeft"></div>
        <div class="tabContentMiddle">
             <span :class="selectIndex==0? 'tabActive':'tabNo'" @click="selectIndex=0;changeTree()">
                    按组织结构选择
                </span>
            <span id="cusBtn" :class="selectIndex==1? 'tabActive':'tabNo'" @click="selectIndex=1;">
                    按部门岗位选择
                </span>

        </div>
        <div class="tabContentRight"></div>
    </div>
    <div class="box-body no-padding box-border " style="overflow: auto;background: #f7f8fa;margin: 60px 20px 15px;">
        <div class="selectBox" v-show="selectIndex==1">
            <div class="typeTitle">请选择公司：</div>
            <div class="companyLIst listBox">
                <div :class="item.select?'item active':'item'" v-for="(item,i) in selectBox.companyList" @click="selectItem(item,'1')">{{item.name}}</div>
            </div>
            <div class="typeTitle">请选择部门：</div>

            <div class="companyLIst listBox">
                <div :class="item.select?'item active':'item'" v-for="(item,i) in selectBox.departList"  @click="selectItem(item,'2')">{{item.departName}}</div>
                <div class="noData" v-if="selectBox.departList.length==0">请先选择公司</div>
            </div>
            <div class="typeTitle">请选择职位：</div>
            <div class="companyLIst listBox">
                <div :class="item.select?'item active':'item'" v-for="(item,i) in selectBox.roleList"  @click="selectItem(item,'3')">{{item.roleName}}</div>
                <div class="noData" v-if="selectBox.roleList.length==0">请先选择部门</div>
            </div>
        </div>
        <ul class="ztree" id="ulRegion" style="height: 80vh;overflow-y: auto;" v-show="selectIndex==0"></ul>
    </div>
    <input type="button" value="添加" id="btnSave" class="btn oaBtn" @click="saveUser"
           style="margin:10px 0;">
</section>

<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script type="text/javascript">
</script>

<script type="text/javascript">
    $(function () {
        var zTreeRegion_setting = {
            view: {
                showIcon: function (treeId, treeNode) {
                    return treeNode.isParent;
                }
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            check: {
                chkboxType: { "Y": "ps", "N": "ps" },
                enable: true
            },
            callback: {
                onCheck: zTreeOnCheck,
                beforeClick:zTreeBeforeClick
            }
        };
        $.ajax({
            url: server.ip + "/email/getOrgInbox.json",
            data: JSON.stringify({
                userId: getUrlParamObj().userId
            }),
            success: function (r) {
                var nodes=r.data.sendData;
                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i].name == "收件箱") {
                        nodes[i].name ="组织机构";
                    }
                }
                app.treeObj = $.fn.zTree.init($("#ulRegion"), zTreeRegion_setting, nodes);
                if(app.userIds){
                    app.treeObj.getNodesByFilter(function (node) {
                        if(app.userIds.indexOf(node.id)>-1) {
                            console.log(node.id)
                            app.treeObj.checkNode(node, true, true, false);
                        }else{
                            app.treeObj.checkNode(node, false, false, false);
                        }
                    });
                }

            }
        });

        function zTreeBeforeClick(treeId, treeNode, clickFlag) {
            app.treeObj.checkNode(treeNode, '', true);
            return false;
        }
        function zTreeOnCheck(treeId, treeNode) {
            console.log(treeNode);
            var receivers = new Array();
            var Nodes = app.treeObj.getCheckedNodes(true);
            for (var i = 0; i < Nodes.length; i++) {
                if(Nodes[i].type == "user") {
                    receivers.push(Nodes[i].name+"; ");
                }
            }
            console.log(receivers);

            $(".userBox").html(receivers)
        };
    });
</script>
<script>
    function getUrlParamObj() {
        var args = new Object();
        var query = location.href;
        var pairs = query.split("&"); //www.cxybl.com break at ampersand
        for (var i = 0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf('='); // look for "name=value"
            if (pos == -1) continue; // if not found, skip
            var argname = pairs[i].substring(0, pos); // extract the name
            var pos1 = argname.indexOf('?');
            if (pos1 > -1) {
                argname = argname.substring(pos1 + 1);
            }
            var value = pairs[i].substring(pos + 1); // extract the value
            value = decodeURIComponent(value); // decode it, if needed
            args[argname] = value; // store as a property
        }
        var ss = args.valueOf(0);
        obj = args;
        return args; // return the object www.cxybl.com
    }
    var app = new Vue({
        el: '#app',
        data: {
            userId:getUrlParamObj().userId,
            userIds:getUrlParamObj().userIds,
            selectIndex: 0,
            selectBox: {
                companyList: [],
                departList: [],
                roleList: [],
                selectCompany: [],
                companyNames: [],
                departNames: [],
                roleNames: [],
                companyIds: [],
                userIds: []
            }
        },
        methods:{
            saveUser:function () {
                var that=this;
                if(this.selectIndex=='0'){
                    if(this.selectBox.userIds.length>0){
                        this.info.voteUsers=this.selectBox.userIds.join(',')
                    }else{
                        this.info.voteUsers='';
                    }
                }else{
                    var receivers = new Array();
                    var Nodes = this.treeObj.getCheckedNodes(true);

                    for (var i = 0; i < Nodes.length; i++) {
                        if(Nodes[i].type == "user") {
                            receivers.push(Nodes[i].id);
                        }
                    }
                    if(receivers.length>0){
                        this.info.voteUsers=receivers.join(',')
                    }else{
                        this.info.voteUsers='';
                    }
                }
                if(that.info.voteUsers){
                    window.wx.miniProgram.postMessage({
                        data:{
                            list:that.info.voteUsers
                        }
                    })
                    window.wx.miniProgram.navigateBack({
                        delta: 1
                    })
                }else{
                    alert("请选择参投人员！！")
                }
            },
            getCompanyList:function () {
                var that=this;
                $.wyui.postMethod('/company/getCompanyByUserId.json', {userId: that.userId}, function (data) {
                    for (var i = 0; i < data.length; i++) {
                        if (that.selectBox.companyNames.indexOf(data[i].name) != -1) {
                            data[i].select =true
                        } else {
                            data[i].select = false
                        }
                    }
                    that.selectBox.companyList = data

                })
            },
            getUserIds:function () {
                var that=this;
                $.wyui.postMethod('/exam/getUserList.json', {
                    companyIds:that.selectBox.companyIds.join(','),
                    departNames:that.selectBox.departNames.join(','),
                    pageSize: 500,
                    requestPage: 1,
                    roleNames: that.selectBox.roleNames.join(',')

                }, function (data) {
                    var list=data.records;
                    var userIds=[];
                    if(list.length>0){
                        for(var i=0;i<list.length;i++){
                            that.selectBox.userIds.push(list[i].userId)
                        }
                    }
                    console.log(that.selectBox.userIds);
                })
            },
            selectItem: function (item,type) {
                var check;
                if (type == '1') {
                    check = "companyIds"
                    this.checkedOne(check, item.id);
                } else if (type == '2') {
                    check = "departNames"
                    this.checkedOne(check, item.departName);
                } else {
                    check = "roleNames"
                    this.checkedOne(check, item.roleName);
                }
                if (item.select == true) {
                    item.select = false
                } else {
                    item.select =true
                }
                console.log(item)
            },
            checkedOne: function (checkList, moduleKey) {
                var that=this;
                var idIndex = this.selectBox[checkList].indexOf(moduleKey)
                if (idIndex >= 0) {
                    this.selectBox[checkList].splice(idIndex, 1)
                } else {
                    this.selectBox[checkList].push(moduleKey)
                }
                if(checkList=='companyIds'){
                    that.selectBox.departNames=[];
                    that.selectDepart()

                }
                if(checkList=='departNames'){
                    that.selectBox.roleNames=[];
                    that.selectRoleName()
                }
                if(checkList=='roleNames'){
                    if(that.selectBox.roleNames.length>0) {
                        that.getUserIds();
                    }
                }

            },

            changeTree:function () {
                var that=this;
                if(that.selectBox.userIds.length>0){
                    var userIdsStr=that.selectBox.userIds.join(',')
                    this.treeObj.getNodesByFilter(function (node) {
                        if(userIdsStr.indexOf(node.id)>-1) {
                            console.log(node.id)
                            that.treeObj.checkNode(node, true, true, false);
                        }else{
                            that.treeObj.checkNode(node, false, false, false);
                        }
                    });
                }

            },
            selectDepart: function () {
                var that = this;
                if(that.selectBox.companyIds.length>0){
                    var companyIds=that.selectBox.companyIds.join(',');
                    $.wyui.postMethod('/exam/getDepartListByCompanyIds.json', {companyIds: companyIds}, function (data) {
                        console.log(data)
                        for (var i = 0; i < data.result.length; i++) {
                            if (that.selectBox.departNames.indexOf(data.result[i].departName) != -1) {
                                data.result[i].select = true;
                            } else {
                                data.result[i].select = false
                            }
                        }

                        that.selectBox.departList = data.result
                        that.selectBox.roleNames=[];
                        for(var i=0;i<that.selectBox.roleList.length;i++){
                            that.selectBox.roleList[i].select=false;
                        }
                    })
                }

            },
            selectRoleName: function () {
                var that = this;
                if(that.selectBox.departNames.length>0) {
                    var companyIds=that.selectBox.companyIds.join(',');
                    var departNames=that.selectBox.departNames.join(',');
                    $.wyui.postMethod('/exam/getRoleNameListByCompanyAndDepart.json', {
                        companyIds: companyIds,
                        departNames: departNames
                    }, function (data) {
                        console.log(data);
                        for (var i = 0; i < data.result.length; i++) {
                            if (that.selectBox.roleNames.indexOf(data.result[i].roleName) != -1) {
                                data.result[i].select = true;
                            } else {
                                data.result[i].select = false
                            }
                        }

                        that.selectBox.roleList = data.result
                    })
                }
            },
        },
        mounted: function () {
            var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
            _this.getCompanyList();
        }
    });
</script>
</body>
</html>
